<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 100px;height: 100px;
            padding: 20px;
            border: solid 30px black;
            margin: 40px;
            position: absolute;
            left: 50px;top: 50px;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div class="box">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div>
</body>
<script src="../jquery.js"></script>
<script>

    // console.log($(".box").width())       // cont
    // $(".box").width(200)

    // console.log($(".box").innerWidth())  // cont + padding
    // $(".box").innerWidth(200)

    // console.log($(".box").outerWidth())  // cont + padding + border
    // $(".box").outerWidth(300)

    // console.log($(".box").offset())     // margin + position
    // $(".box").offset({top:200,left:200})

    // 只能获取不能设置
    // console.log($(".box").position())       // position

    document.onclick = function(){
        // console.log($(".box").scrollTop())
        $(".box").scrollTop(666)
    }


</script>
</html>